<template>
  <div class="video-container">
    <img ref="videoRef" :src="streamUrl" @error="handleError" />
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const props = defineProps({
  streamUrl: {
    type: String,
    required: true
  }
})

const videoRef = ref(null)
const isError = ref(false)

const handleError = (error) => {
  console.error('视频流加载失败:', error)
  isError.value = true
}

onMounted(() => {
  if (videoRef.value) {
    // 确保图片不会被浏览器缓存
    videoRef.value.style.cssText = 'max-width: 100%; height: auto;'
  }
})

onUnmounted(() => {
  // 清理资源
  if (videoRef.value) {
    videoRef.value.src = ''
  }
})
</script>

<style scoped>
.video-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
</style>
